<template>
  <custom-dialog
    ref="dialog" :title="modalTitle" width="740px"
    :before-confirm="beforeConfirm" :on-confirm="onConfirm"
  >
    <el-form ref="form" :model="info" :rules="rules" label-width="120px">
      <el-form-item label="选择车间" prop="pointCode">
        <el-select v-model="info.pointCode" class="width-100">
          <el-option
            v-for="option in workShopOptions" :key="option.pointCode"
            :label="option.pointName" :value="option.pointCode"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="监测点名称" prop="indicatorName">
        <el-input v-model="info.indicatorName" :maxlength="30"></el-input>
      </el-form-item>
      <el-form-item label="监测点编码" prop="indicatorCode">
        <el-input v-model="info.indicatorCode" :maxlength="30"></el-input>
      </el-form-item>
      <el-form-item label="能源折标系数" prop="energyDiscountId">
        <el-select v-model="info.energyDiscountId" filterable class="width-100">
          <el-option v-for="option in energyDiscountOptions" :key="option.id" :label="option.name" :value="option.id">
            <span style="float: left">{{ option.name }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ option.discountFactorUnit }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="能源品种" prop="energyVarietiesTypeId">
        <energy-variety-picker v-model="info.energyVarietiesTypeId" filterable clearable></energy-variety-picker>
      </el-form-item>
      <el-form-item label="监测点类型" prop="type">
        <dictionary-picker dic-code="NENG_YUAN_ZHONG_LEI" v-model="info.type"></dictionary-picker>
      </el-form-item>
      <el-form-item label="能源用途" prop="energyUseId">
        <energy-purpose-picker v-model="info.energyUseId" filterable clearable></energy-purpose-picker>
      </el-form-item>
    </el-form>
  </custom-dialog>
</template>

<script>
import CustomDialog from '@/components/custom-dialog'
import EnergyVarietyPicker from '@/components/energy-variety-picker'
import { selectPointList } from '@/api/point'
import { saveOrUpdate } from '@/api/indicator'
import { selectEnergyDiscountList } from '@/api/energyDiscount'
import DictionaryPicker from '@/components/dictionary-picker'
import EnergyPurposePicker from '@/components/energy-purpose-picker'

export default {
  name: 'monitor-point-modal',
  components: { DictionaryPicker, CustomDialog, EnergyVarietyPicker, EnergyPurposePicker },
  props: {
    modalTitle: String,
    modalData: {
      type: Object,
      default () {
        return {}
      },
    },
  },
  data () {
    return {
      energyDiscountOptions: [],
      info: {
        id: '',
        pointCode: '',
        indicatorCode: '',
        indicatorName: '',
        energyDiscountId: '',
        energyVarietiesTypeId: '',
        energyVarietiesTypeName: '',
        type: '',
        typeName: '',
        energyUseId: '',
        energyUseName: '',
      },
      rules: {
        pointCode: [{ required: true, message: '必填项' }],
        indicatorCode: [{ required: true, message: '必填项' }],
        indicatorName: [{ required: true, message: '必填项' }],
        energyDiscountId: [{ required: true, message: '必填项' }],
        energyVarietiesType: [{ required: true, message: '必填项' }],
        type: [{ required: true, message: '必填项' }],
        energyUseId: [{ required: true, message: '必填项' }],
      },
      workShopOptions: [],
    }
  },
  methods: {
    open () {
      this.info = {
        ...this.$options.data().info,
        ...this.modalData,
      }
      if (this.$refs.form) {
        this.$refs.form.resetFields()
      }
      this.getWorkShopOptions()
      this.getOptions()
      this.$nextTick(() => {
        this.$refs.dialog.open()
      })
    },
    getWorkShopOptions () {
      return selectPointList().then(res => {
        if (res.code === 200) {
          const data = res.data
          this.workShopOptions = Array.isArray(data) ? (data[0].children || []) : []
        }
      })
    },
    getOptions () {
      return selectEnergyDiscountList().then(res => {
        if (res.code === 200) {
          this.energyDiscountOptions = res.data
        }
      })
    },
    beforeConfirm () {
      return this.$refs.form.validate()
    },
    onConfirm (close) {
      const params = { ...this.info }
      return saveOrUpdate(params).then(res => {
        if (res.code === 200) {
          this.$emit('save-success')
          this.$message.success('保存成功')
          close()
        }
      })
    },
  },
}
</script>

<style scoped>

</style>
